<template>
  <div>
    <el-button icon="" @click="visible = true">点击选择</el-button>
    <br />
    详情：<el-input v-model="radio" @change="typeChange"> </el-input>

    <el-dialog
      title="地点选择"
      :visible.sync="visible"
      :closable="false"
      append-to-body
      destroy-on-close	
      :footer="null"
    >
      <point-selector
        @change="handlePosChange"
        :position="[position.lon, position.lat]"
        :proj="proj"
        @cancle="visible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import PointSelector from "./PointSelector.vue";

export default {
  components: {
    PointSelector,
  },
  data() {
    return {
      visible: false,
      posLatLon: {
        lon: 114.3,
        lat: 30.6,
        detail: "其它",
      },
      radio: "其它",
    };
  },
  props: {
    position: {
      type: Object,
      default() {
        return {
          lon: 114.3,
          lat: 30,
          detail: "其它",
        };
      },
    },
    proj: {
      type: String,
      default: "EPSG:3857",
    },
  },
  model: {
    prop: "position",
    event: "change",
  },

  methods: {
    handlePosChange(pos) {
      this.posLatLon.lat = pos[1];
      this.posLatLon.lon = pos[0];
      this.$emit("change", this.posLatLon);
      this.visible = false;
    },
    typeChange(v) {
      this.posLatLon.detail = this.radio;
      this.$emit("change", this.posLatLon);
    },
  },
  mounted() {
    this.$emit("change", this.position);
  },
};
</script>

<style scoped>
</style>